<template>
  <template v-for="subItem in menuList" :key="subItem.path">
    <el-sub-menu v-if="subItem.children?.length" :index="subItem.path">
      <template #title>
        <el-icon>
          <component v-if="subItem.meta.icon" :is="subItem.meta.icon"></component>
          <component v-else is="Tickets"></component>
        </el-icon>
        <span>{{ subItem.meta.title }}</span>
      </template>
      <SubMenu :menuList="subItem.children" />
    </el-sub-menu>
    <el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
      <el-icon>
        <component v-if="subItem.meta.icon" :is="subItem.meta.icon"></component>
        <component v-else is="Tickets"></component>
      </el-icon>
      <template #title>
        <span class="sle">{{ subItem.meta.title }}</span>
      </template>
    </el-menu-item>
  </template>
</template>
 <script setup >
 import { useRouter } from "vue-router";
 const router = useRouter();
 const Props = defineProps(['menuList']);
 const handleClickMenu = (subItem) => {
  //需要判断是否超链接
    router.push(subItem.path);
};
 </script>
 <style scoped lang="scss">

 </style>